import { ElMessageBox } from 'element-plus'

const VMore = (props, { slots, emit, attrs }) => {
  const slot = slots?.default || props.value
  const view = () => {
    const {width} = props
    let customClass = ''
    if(width) {
      customClass = `purchase-max-width-${width}`
    }
    ElMessageBox({
      title: '查看更多',
      showCancelButton: true,
      showConfirmButton: false,
      cancelButtonText: '关闭',
      customClass,
      message: () => <div class='flex flex-col gap-2'>{slot(5)}</div>
    }).catch(() => {})
  }
  let value = slot(1)
  if (!value?.length || (typeof value[0].type !== 'function' && !value[0]?.children?.length)) return '-'
  if(value[0]?.type.toString().indexOf('Symbol(Fragment)') > -1) {
    value = value[0].children
  }
  const more = (props.show || value.length > props.line) ? <el-link type='primary' underline={false} onClick={view}>查看更多<i class="dk-iconfont icon-DArrowRight" /></el-link> : ''
  return <div class='v-more flex flex-col items-start'>
    {
      [
        ...value.slice(0, props.line || 1),
        more
      ]
    }
  </div>
}

VMore.props = {
  value: { type: Function, default: () => { } },
  line: { type: Number, default: 1 }, // 出现查看更多按钮的行数
  width: { type: Number, default: null }, // 弹窗宽度
  show: Boolean, // 是否一直显示
}

export default VMore